<template>
  <div class="news" :style="$store.getters.screenWidth ? '' : 'padding:30px'">
    <div
      v-if="bottom_list && bottom_list.length > 0"
      class="newsLeft"
      :style="$store.getters.screenWidth ? 'width:100%;display:block' : 'width: 100%;'"
    >
      <news-item
        :itemobj="item"
        v-for="(item, index) in bottom_list"
        :key="index"
        style="margin-bottom:10px"
      />
      <div style="width:100%;margin:20px auto;">
        <el-pagination
          v-if="total > 0 && total/10>0"
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div v-else style="width: 100%">
      <transition name="el-zoom-in-center">
        <div style="width: 100%; background-color: #f2f2f2; margin: 0 auto">
          <img src="../assets/empty.jpg" style="width: 25%" alt />
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import imageText from "../components/imageText";
import footerPart from "../views/footer";
import { articleCateglory, articlExample } from "../api/api";
import newsItem from "../components/newsItem";
export default {
  data() {
    return {
      total: "",
      activeName: "first",
      tablist: ["产品资讯", "行业资讯", "国际资讯"],
      bottom_list: [1, 2, 3, 4],
    };
  },
  components: {
    imageText,
    footerPart,
    newsItem,
  },
  mounted() {
    this.getNews(0);
    this.articlExample();
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getNews(val - 1);
    },
    handleClick(tab) {
      console.log(tab.index);
      switch (tab.index) {
        case "0":
          this.$router.push("/About");
          break;
        case "1":
          this.$router.push("/contant");
          break;
        case "2":
          this.$router.push("/Join");
          break;
        case "3":
          this.$router.push("/feedback");
          break;
      }
    },
    async getNews(val) {
      const data = await articleCateglory({
        pageNo: val,
        pageSize: 10,
        pageType: "P",
      });
      console.log("daa", data);
    },
    handleSelect(index) {
      console.log(index);
    },
    async articlExample() {
      let data = await articlExample({
        cid: 103,
        pageNo: 0,
        pageSize: 10,
        pageType: "P",
        title: "",
      });
      console.log("777", data.data);
      this.bottom_list = data.data.data;
      this.total = data.data.totalPage;
    },
  },
};
</script>
<style scoped>
::v-deep .el-tabs__active-bar{
  background-color: transparent;
}
.el-tabs__nav-wrap::after {
  width: 0;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
.tab {
  width: 100%;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  background-color: #fff;
  margin: 0 10px;
  justify-content: center;
}
.tabitem {
  color: #2a333c;
  font-size: 16px;
  margin-right: 20px;
}
.news {
  width: 100%;
  background-color: #f2f2f2;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.newsLeft {
  background-color: #fff;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}
.newRight {
  width: 30%;
  background-color: #fff;
}
.pagination {
  width: 100%;
  padding: 10px 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  background-color: #f2f2f2;
}
</style>